<template>
  <div class="div-pop" catchtouchmove="true">
    <div v-if="!userLoginBoolean" class="get-user-info">
      <div class="top-nav" :style="'height: '+ spaceBarHeight + 'px; padding-top: '+ statusBarTop + 'px;'">
        <div class="flex-center v-align-c">
          <div
            :style="'width: '+ (spaceBarHeight - statusBarTop) + 'px; height: '+ (spaceBarHeight - statusBarTop - 10) + 'px;'"
            class="self-back flex flex-center"
            @click="backPage">
            <van-icon name="arrow" class="font-color-white" size="22px"/>
          </div>
          <div class="flex-item">
            <div class="top-txt flex flex-center" :style="'height: '+ (spaceBarHeight - statusBarTop - 10) + 'px;'">
              <div>选择身份</div>
            </div>
          </div>
          <div :style="'width: '+ (spaceBarHeight - statusBarTop) + 'px;'"></div>
        </div>
      </div>
      <div :style="'height: '+ spaceBarHeight + 'px'"></div>
      <div class="mar-l-15 mar-r-15">
        <ul class="user-list">
          <li
            @click="selUser(1)"
            class="flex v-align-c border-radius-10">
            <img
              v-if="fileSpace"
              :src="fileSpace + '/images/icon-user-1.png'"
              class="width-55 height-50 mar-r-18" alt="">
            <div class="flex-item font-18 font-w">主播</div>
            <van-icon name="arrow" class="font-color-9" size="21px"/>
          </li>
          <li
            @click="selUser(2)"
            class="flex v-align-c border-radius-10">
            <img
              v-if="fileSpace"
              :src="fileSpace + '/images/icon-user-2.png'"
              class="width-55 height-50 mar-r-18" alt="">
            <div class="flex-item font-18 font-w">{{ appInfo.anchorLevelOnePartnerAliasName }}</div>
            <van-icon name="arrow" class="font-color-9" size="21px"/>
          </li>
        </ul>
      </div>
    </div>
    <user-login v-if="userLoginBoolean"></user-login>
  </div>
</template>

<script>
import UserLogin from '@/components/UserLogin'
import { getAnchorApplyList } from '@/api/personal'
import { getMemberInfo } from '@/api/home'
import { getAuth } from '@/api/login'
import { setCustomerId, setPhone, setNickName, setRoleType } from '@/utils/auth'
import { doSaveLoginRecord } from '@/api/common'

export default {
  components: { UserLogin },
  data() {
    return {
      statusBarHeight: 0,
      spaceBarHeight: 0,
      statusBarTop: 0,
      userLoginBoolean: false,
      appInfo: {},
      applyStatus: null,
      anchorApplyList: [],
      customerId: '',
      phone: ''
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    // 店铺信息栏
    this.statusBarTop = this.statusBarHeight - 38
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      this.statusBarTop = this.statusBarHeight - 37
    }
    this.appInfo = this.$pt.getStorageSync('appInfo')
  },
  onShow() {
  },
  mounted() {
  },
  methods: {
    backPage() {
      this.$parent.userTypeBoolean = false
      if (this.getCurrentPage().page.route === 'pages/shop/detail/main') return
      this.$parent.showTabBar()
      if (this.getCurrentPage().page.route !== 'pages/shop/detail/main') {
        this.$parent.changeReload()
      }
    },
    getAnchorApplyList() {
      return new Promise((resolve, reject) => {
        getAnchorApplyList({
          memberId: this.customerId
        }).then((response) => {
          if (response.isError) return
          this.anchorApplyList = response.data
          // item.applyStatus  为0申请中, 为1申请通过，为2申请拒绝
          this.applyStatus = 0
          if (this.anchorApplyList.length) {
            this.anchorApplyList.forEach(item => {
              if (item.applyStatus === 1) {
                this.applyStatus++
              }
            })
          }
          resolve(true)
        })
      })
    },
    async selUser(val) {
      switch (val) {
        case 1:
          // 选择主播
          await this.authCheckEls()
          this.$parent.userTypeBoolean = false
          this.$pt.setStorageSync('anchorAuth', true)
          if (!this.customerId) {
            if (this.getCurrentPage().page.route !== 'pages/shop/detail/main') {
              this.$pt.hideTabBar({
                animation: false
              })
            }
            this.$parent.isGetUserInfo = false
            setTimeout(() => {
              this.$parent.isGetUserInfo = true
            }, 100)
            setCustomerId('')
            setPhone('')
            setNickName('')
          } else {
            await this.getAnchorApplyList()
            if (this.applyStatus > 0) {
              setRoleType(1)
              setCustomerId(this.customerId)
              setPhone(this.phone)
              await this.doSaveLoginRecord()
              this.$pt.setStorageSync('anchorBack', true)
              this.backPage()
            }
            if (this.applyStatus === 0 && this.anchorApplyList.length === 3) {
              this.$pt.setStorageSync('anchorBack', true)
              this.backPage()
              return
            }
            if (this.applyStatus === 0 && this.anchorApplyList.length !== 3) {
              await this.getMemberInfo()
              this.$pt.showTabBar({
                animation: false
              })
              this.$pt.navigateTo({ url: '/pages/personal/apply-anchor/main?inPage=1' })
            }
          }
          break
        case 2:
          // 选择中介
          this.userLoginBoolean = true
          break
      }
    },
    doSaveLoginRecord() {
      return new Promise((resolve, reject) => {
        doSaveLoginRecord({
          roleType: '1',
          phone: this.getPhone,
          password: '',
          openId: this.getOpenId,
          customerMemberId: this.customerId
        }).then((response) => {
          resolve(true)
        }).catch(() => {
        })
      })
    },
    authCheckEls() {
      return new Promise((resolve, reject) => {
        let that = this
        this.$pt.login({
          success(res) {
            if (res.code) {
              getAuth(res.code).then((response) => {
                if (response.data.customerId) {
                  that.customerId = response.data.customerId
                }
                if (response.data.phone) {
                  that.phone = response.data.phone
                }
                resolve(true)
              }).catch(() => {
              })
            }
          }
        })
      })
    },
    getMemberInfo() {
      getMemberInfo(this.customerId).then((response) => {
        if (response.isError) return
        setNickName(response.data.nickname)
        if (response.data.phone) {
          setPhone(response.data.phone)
        } else {
          setPhone('')
        }
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="less">
  .div-pop{
    z-index: 1200;
  }
  .get-user-info {
    width: 375px;
    height: calc(100vh);
    background-color: #f5f5f5;
    overflow: hidden;    
    .top-nav{
      background: #7427ff;
      color: #ffffff;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      .top-txt{
        font-size: 18px;
        color: #ffffff;
      }
      .self-back {
        transform: rotate(180deg);
      }
    }
    .user-list{
      padding-top: 6px;
      li{
        background-color: #fff;
        padding: 26px 30px 26px 22px;
        margin-top: 17px;
      }
    }
  }
</style>
